<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    #contents {
      padding: 5px;
      border: 1px green solid;
    }
  </style>
</head>

<body>

  <fieldset id="contents">
    <legend>#contents</legend>
    <p>
      How about to read <a href="https://wikipedia.org">Wikipedia</a> or visit <a href="https://w3.org"><i>W3.org</i></a> and learn about modern standards?
    </p>
  </fieldset>

  <script>
    contents.onclick = function(event) {

      function handleLink(href) {
        let isLeaving = confirm(`Leave for ${href}?`);
        if (!isLeaving) return false;
      }

      let target = event.target.closest('a');

      if (target && contents.contains(target)) {
        return handleLink(target.getAttribute('href'));
      }
    };
  </script>
  
</body>
</html>
